<div class="layui-tab-item layui-show" style="padding: 20px;">
    <div class="">
        <div id="layui-card">
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                <legend>已选标签</legend>
            </fieldset>
            <div class="layui-form">
                <div class="layui-form-item" id="select_label">

                </div>
            </div>
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                <legend>选择标签</legend>
            </fieldset>
            <div class="layui-form">
                <div class="layui-form-item" id="default_item">
                    {notempty name="labels"}
                    {volist name="labels" id="label"}
                    <div class="layui-inline"><label class="layui-form-label"><span class="layui-badge {$label.style|getLabelStyle}" data-value="{$label.name}" data-style="{$label.style}">{$label.name}</span></label></div>
                    {/volist}
                    {/notempty}
                    {empty name="labels"}
                    <div class="layui-inline"><label class="layui-form-label"><span class="layui-badge" data-value="热卖" data-style="red">热卖</span></label></div>
                    <div class="layui-inline"><label class="layui-form-label"><span class="layui-badge layui-bg-green" data-value="新品" data-style="green">新品</span></label></div>
                    <div class="layui-inline"><label class="layui-form-label"><span class="layui-badge layui-bg-orange" data-value="推荐" data-style="orange">推荐</span></label></div>
                    <div class="layui-inline"><label class="layui-form-label"><span class="layui-badge layui-bg-blue" data-value="促销" data-style="blue">促销</span></label></div>
                    {/empty}
                </div>
                <div class="layui-form-item">
                        <label class="layui-form-label">标签名称：</label>
                    <div class="layui-input-inline">
                        <input type="text" name="name" id="label_name" lay-verify="name" style="width:200px;" placeholder="请输入标签名称" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-input-inline">
                        <select name="style" id="style">
                            <option value="">请选择颜色</option>
                            <option value="red" selected="">红色</option>
                            <option value="green">绿色</option>
                            <option value="orange">橙色</option>
                            <option value="blue">蓝色</option>
                        </select>
                    </div>
                    <div class="layui-input-inline text-center" style="width: 40px;">
	                    <button class="layui-btn layui-btn-sm layui-btn-normal" id="add_label" style="height: 37px;line-height: 37px;">确定</button>
	                </div>
                </div>
            </div>

        </div>
    </div>
</div>

<script>
    //渲染表单
    layui.use('form', function () {
        var form = layui.form;
        form.render();
    });
    var selected = new Array;
    //todo 默认选中
    $("#default_item span").click(function () {
        var label_text = $(this).attr("data-value");
        var label_style = $(this).attr("data-style");
        appendLabel(label_text, label_style);
    });
    $("#add_label").click(function () {
        var label_text = $("#label_name").val();
        var label_style = $("#style").val();
        appendLabel(label_text, label_style);
    });
    //删除标签
    $(".layui-layer-content").on('click','.layui-unselect',function () {
        var label = $(this).parent().parent();
        var label_text = label.attr('data-text');
        if(selected.length>0){
            $.each(selected, function (i, j) {
                if(selected[i]){
                    if (j.text == label_text) {
                        selected.splice(i, 1);
                        label.remove();
                    }
                }
            });
        }
    });
    //追加标签
    function appendLabel(label_text, label_style) {
        var current = {'text': label_text, 'style': label_style};
        var isAppend = true;
        $.each(selected, function (i, j) {
            if (j.text == label_text) {
                layer.msg(label_text + '标签已存在');
                isAppend = false;
                return false;
            }
        });
        if (isAppend) {
            selected.push(current);
            switch (label_style) {
                case 'red':
                    label_style = "";
                    break;
                case 'green':
                    label_style = "layui-bg-green";
                    break;
                case 'orange':
                    label_style = "layui-bg-orange";
                    break;
                case 'blue':
                    label_style = "layui-bg-blue";
                    break;
                default :
                    label_style = '';
            }
            var html = '<div class="layui-inline" data-text="'+label_text+'"><label class="layui-form-label"><span class="layui-badge ' + label_style + '" >' + label_text + '</span><i class="layui-icon layui-unselect layui-tab-close">ဆ</i></label></div>';
            $("#select_label").append(html);
        }
    }

    function getSelected() {
        if(selected<=0){
            layer.msg("请先选择标签");
            return false;
        }
        return selected;
    }
</script>
